<template>
  <div class="waterfallFlow">
    <ul>
      <li
        ref='waterfallItem'
        v-for="(item,index) in waterfallArr"
        :key="index"
      >
        <img :src="item.src">
        <i>标题 {{item.title}} </i>
        <span>原价 50 ￥</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "waterfallFlow",  // 瀑布流
    data() {
      return {
        waterfallArr: [
          { id: 1, title: '111', src: 'https://img1.baidu.com/it/u=3298709097,197662699&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500' },
          { id: 2, title: '222', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-090922%2F2zsdcrlyqlw2zsdcrlyqlw.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663728955&t=a62229fa78dcc6c092f359dfb1ce917e' },
          { id: 3, title: '333', src: 'https://img1.baidu.com/it/u=2497560938,1530304424&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500' },
          { id: 3.5, title: '3.5 ', src: 'https://img2.baidu.com/it/u=2660660848,2295919981&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889' },
          { id: 4, title: '444', src: 'https://img2.baidu.com/it/u=607925181,927720317&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' },
          { id: 5, title: '555', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F911%2F121115144021%2F151211144021-6.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663728955&t=74a85eadc599a54f56e96469bb591dd0' },
          { id: 6, title: '666', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F57fddcd03c2d7.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663728955&t=590e9d3755f679673a86a90c0c8bc052' },
          { id: 7, title: '777', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg13.51tietu.net%2Fpic%2F20200118%2F5iim1izngzz5iim1izngzz.jpg&refer=http%3A%2F%2Fimg13.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663729086&t=7b33c9ff1377606badeaf5ec9b6ad86b' },
          { id: 8, title: '888', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-05-17%2F5afd6b88bd342.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663729086&t=f07d7e388e650f865341d28be9da0617' },
          { id: 9, title: '999', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091121%2Fdvonbojh4q2dvonbojh4q2.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663729086&t=39b71b035eba545dcbeffa38b44aac75' },
          { id: 10, title: 'aaa', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-24%2F5adec6da70a56.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663728955&t=4e7e330dc1a6cc38b7911e83b633ddcf' },
          { id: 11, title: 'bbb', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-05-09%2F5af28869b9111.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663729086&t=b9bb50c906297ccb28695f0774c5b18f' },
          { id: 12, title: 'ccc', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F7Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F2e2eb9389b504fc2920bbd0de3dde71190ef6d65.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663729086&t=4e18581d2e64f0e79a410bb1e1dca82c' },
          { id: 13, title: 'ddd', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-090907%2Fd52v4gbkk0od52v4gbkk0o.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663729086&t=acc1bf788f214b6b6762b9434df37d2f' },
          { id: 14, title: 'fff', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-090922%2Fwljn1hc44h3wljn1hc44h3.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663729086&t=4117f3e7cc60e3e99ff8808c24691afb' },
          { id: 15, title: 'eee', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091302%2Fbvgb1mzwwpcbvgb1mzwwpc.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663729086&t=2696c0aeb4060cd36052ec109f15ed79' },
          { id: 16, title: 'hhh', src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.zzvips.com%2Fuploads%2Fallimg%2F200814%2F22561WD0-1.jpg&refer=http%3A%2F%2Fwww.zzvips.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663729086&t=2201ae39e019e7b4dc8c6f756e7925f3' }
        ]
      }
    },
    created() {

    },
    methods: {

    }
  }
</script>

<style scoped lang="scss">
  .waterfallFlow {
    background: #fff;
    min-height: 300px;
    ul {
      box-sizing: border-box;
      column-count: 4;
      column-gap: 20px;
      padding: 20px;
      li {
        height: auto;
        font-size: 14px;
        box-sizing: border-box;
        margin: 0 0 10px 0;
        overflow: hidden;
        /*border: 1px solid #0f0;*/
        img {
          width: 100%;
          display: block;
          height: auto;
        }
        i{
          display: block;
          margin-left: 10px;
          line-height: 2;
          color: #000;
        }
        span {
          text-decoration: line-through;
          line-height: 2;
          margin-left: 10px;
        }
      }
    }
  }
</style>
